// pages/epi_4/canvas/canvas.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      width: null,
      height: null,
      fillStyle: null,
      strokeStyle: null,
      lineWidth: null,
      font: null,
      textBaseline: null,
      tab1: true,
      tab2: false
  },
  painter: null,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  getCanvas(){
    var that = this
    wx.createSelectorQuery()
    .select('#myCanvas')
    .fields({node:true, size:true})
    .exec(res => {
            const canvas = res[0].node
            const ctx = canvas.getContext('2d')
            that.painter = ctx
            that.setData({
                width: ctx.canvas.width,
                height: ctx.canvas.height,
                fillStyle: ctx.fillStyle,
                strokeStyle: ctx.strokeStyle,
                lineWidth: ctx.lineWidth,
                font: ctx.font,
                textBaseline: ctx.textBaseline
            })
        })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onLoad() {
    this.getCanvas()
  },

  onShow(){
      this.getCanvas()
  },

  show(e){
      if (e.target.id == 'btn1'){
        this.setData({
            tab1: true,
            tab2: false
        })
      } else {
        this.painter.reset()
        this.setData({
            tab1: false,
            tab2: true
        })  
      }
  },

  resetPainter(){
      this.painter.fillStyle = this.data.fillStyle
      this.painter.strokeStyle = this.data.strokeStyle
      this.painter.lineWidth = this.data.lineWidth
      this.painter.font = this.data.font
      this.painter.textBaseline = this.data.textBaseline
  },

  run(e){
        switch(e.currentTarget.id){
            case 'rect':
                this.resetPainter()
                this.painter.rect(10, 10, 80, 50)
                this.painter.stroke()
                break;
            case 'fillRect':
                // this.resetPainter()
                this.painter.fillRect(100, 10, 80, 50)
                break;
            case 'strokeRect':
                this.resetPainter()
                this.painter.strokeRect(10, 70, 170, 50)
                break
            case 'clearRect':
                this.painter.clearRect(120, 20, 20, 20)
                break
            case 'stroke':
                this.painter.beginPath()
                this.painter.moveTo(250, 10)
                this.painter.lineTo(225, 50)
                this.painter.lineTo(275, 50)
                this.painter.closePath()
                this.painter.stroke()
                break
            case 'arc':
                this.painter.beginPath()
                this.painter.translate(150, 75)
                this.painter.arc(0,0,50,0,1.5707)
                this.painter.stroke()
                break
            case 'rotate':
                this.painter.beginPath()
                this.painter.moveTo(0,0)
                this.painter.rotate(3.14159/10)
                this.painter.lineTo(50,0)
                this.painter.stroke()
                break
            case 'text':
                this.painter.strokeStyle = '#999'
                this.painter.lineWidth = 0.5

                for(let y=0;y<=150;y+=50){
                    this.painter.beginPath()
                    this.painter.moveTo(0, y)
                    this.painter.lineTo(300, y)
                    this.painter.stroke()
                }

                for(let x=0;x<=300;x+=50){
                    this.painter.beginPath()
                    this.painter.moveTo(x, 0)
                    this.painter.lineTo(x, 150)
                    this.painter.stroke()
                }

                this.painter.font = '50px Arial' //设置字体时必须写明字体族否则不显示
                // this.painter.textBaseline = 'middle'
                this.painter.fillText('XYZ', 50, 50)
                // this.painter.stroke()
                // this.painter.save()
                break
            case 'restore':
                this.painter.font = '50px Arial' 
                this.painter.save()
                this.painter.fillText('XYZ', 50, 50)

                this.painter.font = '25px Arial'
                // this.painter.restore()
                this.painter.fillText('XYZ', 50, 100)
                break
      }
  }
})